<template>
    <body style="background-color:#1c77ac; :background-image:url(backImg); background-repeat:no-repeat; background-position:center top; overflow:hidden;">

    <div id="mainBody">
      <div id="cloud1" class="cloud"></div>
      <div id="cloud2" class="cloud"></div>
    </div>  


<div class="logintop">    
    <span :style="{'font-size':'9px'}">欢迎登录后台管理界面平台</span>       
    </div>
    
    <div class="loginbody">
    
    <span class="systemlogo"></span> 
       
    <div class="loginbox" ref="loginbox">
    
    <ul>
	<el-form :model="ruleForm" class="elForm" :rules="rules" ref="ruleForm" label-width="80px">
    <el-form-item prop='username'>
    <el-input class='username' ref='username' tabindex="1"
          autocomplete="on" v-model="ruleForm.username" placeholder='请输入用户名'  prefix-icon="el-icon-user-solid"></el-input>
    </el-form-item>
    <el-form-item prop='password'>
    <el-input class='password' ref='password'  @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
            @keyup.enter.native="handleLogin" tabindex="2"
            autocomplete="on" type="password" v-model="ruleForm.password" placeholder='请输入密码' prefix-icon="el-icon-lock"></el-input>
    </el-form-item>
    <span slot="error" slot-scope="scope" class="el-form-item__error" style="display: inline-block;">
          {{ scope.error }}
    </span>
    <li><el-button type="primary" style="width:30%;margin-left:-100px;" @click.native.prevent="handleLogin">{{ loginText }}</el-button><label><a href="#">忘记密码？</a></label></li>
    </el-form>
	</ul>
    </div>
    </div>
    <div class="loginbm"><a href="http://www.aspku.com">Author:zhangjin.</a> </div>
	
    
</body>
</template>

<script>
  import { successMsg } from '@/utils/tools'
  import '@/assets/login/style.css'
  export default {
    name: 'Login',
    data() {
      return {
       backImg:'@/assets/login/images/light.png',
       capsTooltip: false,
       loading: false,
       loginText:'登录',
       windowWidth:0,
       redirect: undefined,
       otherQuery: {},
       ruleForm:{
        username:'13333333333',
        password:'admin123456'
       },
       rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
       }
    }
  },
  mounted() {
    if (this.ruleForm.username === '') {
      this.$refs.username.focus()
    } else if (this.ruleForm.password === '') {
      this.$refs.password.focus()
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  methods:{
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    handleLogin(){
        this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loginText='登录中...'
          this.$store.dispatch('user/login', this.ruleForm).then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            })
            .catch(() => {
              this.loginText='登录'
              return false
            })
        } else {
          console.log('error submit!!')
          this.loginText='登录'
          return false
        }
      })
    },
     getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
} 
</script>

<style scoped>
            .username{
                margin-left: -100px;
            }
            .password{
                
                margin-left: -100px;
            }
            /deep/ .el-form-item__error { 
                margin-left:-50px;
            }
            .loginbody{
              text-align:center
            }
            .loginbox{
              margin:0 auto;width:600px;height:600px;padding-top:70px;margin-top:70px;
            }
            .elForm{
              margin-top:10px;
              margin-left: 250px;
            }
            a{font-size:9px;}
            ul{display:block;margin:0;padding:0;list-style:none;font-size:9px;}
            li{display:block;margin:0;padding:0;list-style: none;font-size:9px;}
            dl,dt,dd,span{margin:0;padding:0;display:block;}
            img{border:0;}

</style>
